<template>
  <PanerForm :isShowBarDrawer="true" :caption="'编辑实体'">
    <template #body>
      <tabs ref="tabsView" :activeName="'1'">
        <tabs-item title="基本信息" name="1">
          <div class="tab-content">
            <div class="d-row">
              <div class="d-row">
                <div class="d-form-group d-form-group-flex d-col-xs-6">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">标识</label>
                  </div>
                  <div class="d-form-el">
                    <input v-model="state.entity" max-length="36" class="d-form-input" type="text" placeholder="必须是英文与数字组合,以英文开头,最大长度36" />
                  </div>
                </div>
                <div class="d-form-group d-form-group-flex d-col-xs-6">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">名称</label>
                  </div>
                  <div class="d-form-el">
                    <input v-model="state.name" max-length="36" class="d-form-input" type="text" />
                  </div>
                </div>
              </div>
              <div class="d-row">
                <div class="d-form-group d-form-group-flex">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">功能描述</label>
                  </div>
                  <div class="d-form-el">
                    <input v-model="state.description" class="d-form-input" type="text" />
                  </div>
                </div>
                <div class="d-form-group d-form-group-flex">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">详细说明</label>
                  </div>
                  <div class="d-form-el">
                    <HtmlViewer v-model="state.explain" :mode="STATUS.EDIT" ref="htmlViewer" />
                  </div>
                </div>
                <div class="d-form-group d-form-group-flex d-col-xs-6">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">所属微应用</label>
                  </div>
                  <div class="d-form-el">
                    <select v-model="state.mid" class="d-form-select">
                      <option v-for="item in mappList" :key="item.id" :value="item.id">{{ item.text }}</option>
                    </select>
                  </div>
                </div>
                <div class="d-form-group d-form-group-flex d-col-xs-6">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">状态</label>
                  </div>
                  <div class="d-form-el">
                    <select v-model="state.status" class="d-form-select">
                      <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
                    </select>
                  </div>
                </div>
                <div class="d-form-group d-form-group-flex d-col-xs-6">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">排序</label>
                  </div>
                  <div class="d-form-el">
                    <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
                  </div>
                </div>
                <div class="d-form-group d-form-group-flex d-col-xs-12">
                  <div class="d-form-label d-text-right">
                    <label class="label-text">标签</label>
                  </div>
                  <div class="d-form-el">
                    <input v-model="state.labels" class="d-form-input" type="text" placeholder="分号间隔" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tabs-item>
        <tabs-item title="字段列表" name="2">
          <div class="tab-content">
            <div class="d-row d-row-fields">
              <!-- <Grid v-model="state.fields" ref="gridList" :isPagerAble="false">
                <GridColumn :width="48" type="checkbox" className="d-vm d-vm-actions" />
                <GridColumn :width="60" type="index" label="序号" className="d-vm d-vm-actions" />
                <GridColumn field="field" label="字段名">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.field" max-length="36" class="d-form-input" type="text" placeholder="表字段,英文与字母组合" />
                  </template>
                </GridColumn>
                <GridColumn field="name" label="名称">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.name" min="1" max-length="36" class="d-form-input" type="text" placeholder="显示名称,中文或英文" />
                  </template>
                </GridColumn>
                <GridColumn field="type" label="类型">
                  <template v-slot:tbody="scope">
                    <select v-model="scope.row.data.type" class="d-form-select">
                      <option v-for="item in tableFieldTypeList" :key="item.id" :value="item.id">{{ item.text }}</option>
                    </select>
                  </template>
                </GridColumn>
                <GridColumn field="length" label="长度">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.length" max="255" class="d-form-input" type="number" />
                  </template>
                </GridColumn>
                <GridColumn field="default" label="默认值">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.default" max-length="36" class="d-form-input" type="text" />
                  </template>
                </GridColumn>
                <GridColumn field="primaryKey" label="主键">
                  <template v-slot:tbody="scope">
                    <select v-model="scope.row.data.primaryKey" class="d-form-select">
                      <option v-for="item in judgeOptions" :key="item.id" :value="item.id">{{ item.text }}</option>
                    </select>
                  </template>
                </GridColumn>
                <GridColumn field="props" label="属性">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.props" max-length="36" class="d-form-input" type="text" />
                  </template>
                </GridColumn>
                <GridColumn field="sort" label="排序规则">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.sort" max-length="36" class="d-form-input" type="text" />
                  </template>
                </GridColumn>
                <GridColumn field="comment" label="注释">
                  <template v-slot:tbody="scope">
                    <input v-model="scope.row.data.comment" max-length="36" class="d-form-input" type="text" />
                  </template>
                </GridColumn>
                <GridColumn field="action" :width="120" label="操作" className="d-vm d-vm-actions d-vm-actions-visible">
                  <template v-slot:tbody="scope">
                    <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
                      <a @click="addRow(scope.row.index)" class="d-tools-item d-text-linker"><PlusIcon size="sm" /></a>
                      <span class="d-dropdown d-drop-hover d-drop-right d-tools-item d-text-linker">
                        <MenuIcon title="更多" />
                        <div class="d-list-menu d-list-cascade d-list-cascade-right">
                          <ul class="d-list-menu-group">
                            <li class="d-list-menu-item">
                              <a @click="cloneRow(scope.row, scope.row.index)" class="d-list-item-row">
                                <CloneIcon size="sm" /><span class="d-list-item-text">克隆</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </span>
                      <a @click="delRow(scope.row.index)" class="d-tools-item d-text-linker"><DeleteIcon size="sm" /></a>
                    </div>
                  </template>
                </GridColumn>
                <template v-slot:empty>
                  <div class="d-text-center">
                    <a class="d-text-linker" title="添加" @click="addRow"><PlusIcon /></a>
                  </div>
                </template>
              </Grid> -->
              <ParamsView :params="fields" />
              <div v-if="isEdit" class="d-section">
                <div class="d-caption-lead">配置</div>
              </div>
              <div v-if="isEdit" class="d-row">
                <div class="d-form-group d-form-group-flex">
                  <div class="d-form-label d-text-right" style="width: 120px">
                    <label class="label-text">是否同步至服务</label>
                  </div>
                  <div class="d-form-el">
                    <select v-model="state.isSyncService" class="d-form-select">
                      <option
                        v-for="item in judgeOptions"
                        :key="item.id" :value="item.id">{{ item.text }}</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </tabs-item>
      </tabs>
    </template>
    <template #bar-drawer>
      <button @click="handleSubmit" class="d-btn d-btn-primary" type="button">提交</button>
      <button v-if="!isEdit" @click="handleReset" class="d-btn d-btn-default" type="reset">重置</button>
      <a v-d-goback class="d-btn d-btn-default">返回</a>
    </template>
  </PanerForm>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Grid, GridColumn, Dialoger, FormCalendar, Tabs, TabsItem } from '@daelui/vdog/dist/components.js'
import { HtmlViewer } from '@daelui/vdog/dist/viewer.js'
import { strer, parser, objecter } from '@daelui/dogjs/dist/components.js'
import { PlusIcon, DeleteIcon, MenuIcon, CloneIcon } from '@daelui/vdog/dist/icons.js'
import { zh as locale } from '@daelui/dogjs/dist/locale.js'
import { STATUS } from '@daelui/dogjs/dist/constant.js'
import entSer from '@/service/action/entity.action.js'
import mappSer from '@/service/action/mapp.action.js'
import ParamsView from '../inter/structure/params.vue'
import interBis from '../inter/structure/business/interface.js'
import { state } from '@/service/stock/index'

export default {
  components: {
    PanerForm,
    Grid,
    GridColumn,
    FormCalendar,
    HtmlViewer,
    Tabs,
    TabsItem,
    PlusIcon,
    DeleteIcon,
    MenuIcon,
    CloneIcon,
    ParamsView
  },

  data () {
    return {
      STATUS,
      isEdit: false, // 是否是编辑模式
      // 表单数据
      state: {
        id: '',
        entity: '',
        name: '',
        fields: '',
        mid: '',
        description: '',
        explain: '',
        status: 1,
        labels: '',
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 当前实体字段配置
      fields: {
        children: [{pid: 0, type: 'string', ruleType: 'default', required: 1, isCollapse: false}]
      },
      // 状态列表
      statusList: state.statusList,
      // 表字段类型
      tableFieldTypeList: [
        { id: 'VARCHAR', text: '文本'},
        { id: 'INT', text: '数字'},
        { id: 'DATETIME', text: '日期'}
      ],
      // 布尔值
      judgeOptions: state.judgeOptions,
      // 微应用
      mappList: []
    }
  },

  methods: {
    /**
     * @function 加载
    */
    loadItem (id) {
      entSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        data.fields = parser.toObject(data.fields)
        data.description = data.description || ''
        this.$refs.htmlViewer.update(data.description)
        // 渲染
        this.renderEntity(data)
      })
    },
    /**
     * @function 渲染
     * @param {Object} entity
    */
    renderEntity (entity) {
      // 所属模块
      entity = objecter.extend(true, {}, entity)
      entity.fields = parser.toObject(entity.fields || {})
      entity.fields = objecter.isPlainObject(entity.fields) ? entity.fields : {}
      // 响应参数
      let fields = entity.fields.params || []
      if (fields.length < 1) {
        fields.push({type: 'string', ruleType: 'default', required: 1})
      }
      entity.fields.params = fields
      this.fields.children = interBis.unPackParams(
        fields
      )
      this.state = entity
    },
    // 重置状态
    resetState () {
      this.state = {
        id: '',
        entity: '',
        name: '',
        fields: '',
        mid: '',
        description: '',
        explain: '',
        status: 1,
        labels: '',
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      }
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      let state = objecter.clone(this.state)
      state.fields.params = interBis.formatParams(
        interBis.packParams(
          objecter.extend(true, [], this.fields.children)
        )
      )
      state.fields = parser.stringify(state.fields)
      // 编辑
      if (this.isEdit) {
        defer = entSer.editItem(state)
      } else { // 添加
        defer = entSer.addItem(state)
      }
      defer.then(result => {
        if (result.success) {
          Dialoger.success(locale.action.success)
          // 添加则回到列表页
          if (!this.isEdit) {
            this.$router.push(this.getMicroRoute('/service/entity/list'))
          }
        } else {
          Dialoger.danger(locale.action.fail)
        }
      })
    },

    handleReset () {}
  },

  beforeMount () {
    let params = this.$route.params
    // 新建
    if (!params.id) {
      this.isEdit = false
      this.resetState()
      this.renderEntity(this.state)
    } else { // 编辑
      this.isEdit = true
      this.loadItem(params.id)
    }
    // 微应用列表
    mappSer.queryAllListOption().then(list => {
      this.mappList = list
    })
  },

  mounted () {

  }
}
</script>

<style lang="less" scoped>
.tab-content {
  padding-top: 16px;
}
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 320px;
}
.d-form-group /deep/.ql-container .ql-editor {
  min-height: 200px;
}
.d-row-fields {
  padding-bottom: 80px
}
</style>

<style lang="less">
.d-vm-actions-visible {
  .d-table-cell {
    overflow: visible;
  }
}
</style>
